<template>
  <div class="rank">
    <div class="card">
      <div class="frosted">
        <div class="title">
          <div class="left">实时热门电影</div>
          <div class="right">豆瓣榜单</div>
        </div>
        <div class="item">
          <div class="text">1</div>
          <div class="img img1"></div>
          <div class="detail">
            <div class="name">坏蛋联盟</div>
            <van-rate
              v-model="value1"
              readonly
              size="8"
              color="rgb(255,210,30)"
              :allow-half="true"
            />
            <span>7.4</span>
          </div>
        </div>
        <div class="item">
          <div class="text">2</div>
          <div class="img img2"></div>
          <div class="detail">
            <div class="name">奇异博士2:疯狂多元宇宙</div>
            <van-rate
              v-model="value2"
              readonly
              size="8"
              color="rgb(255,210,30)"
              :allow-half="true"
            />
            <span>暂无</span>
          </div>
        </div>
        <div class="item">
          <div class="text">3</div>
          <div class="img img3"></div>
          <div class="detail">
            <div class="name">你好，李焕英</div>
            <van-rate
              v-model="value3"
              readonly
              size="8"
              color="rgb(255,210,30)"
              :allow-half="true"
            />
            <span>7.7</span>
          </div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="frosted">
        <div class="title">
          <div class="left">一周口碑电影</div>
          <div class="right">豆瓣榜单</div>
        </div>
        <div class="item">
          <div class="text">1</div>
          <div class="img img4"></div>
          <div class="detail">
            <div class="name">万湖会议</div>
            <van-rate
              v-model="value4"
              readonly
              size="8"
              color="rgb(255,210,30)"
              :allow-half="true"
            />
            <span>8.1</span>
          </div>
        </div>
        <div class="item">
          <div class="text">2</div>
          <div class="img img5"></div>
          <div class="detail">
            <div class="name">回到太空</div>
            <van-rate
              v-model="value5"
              readonly
              size="8"
              color="rgb(255,210,30)"
              :allow-half="true"
            />
            <span>8.7</span>
          </div>
        </div>
        <div class="item">
          <div class="text">3</div>
          <div class="img img6"></div>
          <div class="detail">
            <div class="name">北极熊</div>
            <van-rate
              v-model="value6"
              readonly
              size="8"
              color="rgb(255,210,30)"
              :allow-half="true"
            />
            <span>8.4</span>
          </div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="frosted">
        <div class="title">
          <div class="left">豆瓣TOP250</div>
          <div class="right">豆瓣榜单</div>
        </div>
        <div class="item">
          <div class="text">1</div>
          <div class="img img7"></div>
          <div class="detail">
            <div class="name">肖申克的救赎</div>
            <van-rate
              v-model="value7"
              readonly
              size="8"
              color="rgb(255,210,30)"
              :allow-half="true"
            />
            <span>9.7</span>
          </div>
        </div>
        <div class="item">
          <div class="text">2</div>
          <div class="img img8"></div>
          <div class="detail">
            <div class="name">霸王别姬</div>
            <van-rate
              v-model="value8"
              readonly
              size="8"
              color="rgb(255,210,30)"
              :allow-half="true"
            />
            <span>9.6</span>
          </div>
        </div>
        <div class="item">
          <div class="text">3</div>
          <div class="img img9"></div>
          <div class="detail">
            <div class="name">阿甘正传</div>
            <van-rate
              v-model="value9"
              readonly
              size="8"
              color="rgb(255,210,30)"
              :allow-half="true"
            />
            <span>9.5</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
export default {
  name: "Rank",
  setup() {
    let data = reactive({
      value1: 3.7,
      value2: 0,
      value3: 4,
      value4: 4,
      value5: 4.5,
      value6: 4,
      value7: 4.8,
      value8: 4.7,
      value9: 4.7,
    });
    return {
      ...toRefs(data),
    };
  },
};
</script>

<style lang="less" scoped>
.rank {
  width: 375px;
  display: flex;
  overflow-x: scroll;
  padding: 15px 10px;
  -webkit-scrollbar: none;
  padding-bottom: 10px;
  &::-webkit-scrollbar {
    display: none;
  }
  .card {
    flex-shrink: 0;
    width: 260px;
    height: 180px;
    margin-right: 15px;
    &:first-child {
      background-image: url(../../../assets/02.webp);
    }
    &:nth-child(2) {
      background-image: url(../../../assets/05.webp);
    }
    &:nth-child(3) {
      background-image: url(../../../assets/08.webp);
    }
    background-size: cover;
    margin-right: 10px;
    display: flex;
    border-radius: 10px;
    flex-flow: column;
    padding: 10px;
    color: #fff;
    .frosted {
      border-radius: 5px;
      box-shadow: 0 0 1px #000;
      margin: 5px;
      backdrop-filter: blur(4px);
      .title {
        height: 40px;
        margin:10px 0;
        .left {
          float: left;
          margin-left: 5px;
        }
        .right {
          margin-right: 5px;
          float: right;
          font-size: 16px;
          margin-top: 6px;
        }
      }
      .item {
        height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: flex;
        .text {
          margin: 5px;
        }
        .img {
          margin-left: 5px;
          height: 36px;
          width: 20px;
          background-color: #368;
          border-radius: 5px;
          margin: 5px;
        }
        .detail {
          display: flex;
          justify-content: center;
          align-items: center;
          .name {
            font-size: 16px;
            margin-right: 15px;
            width: 90px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          span {
            margin-left: 5px;
            font-size: 14px;
            color: rgb(255, 210, 30);
          }
        }
        .img1 {
          background: url(../../../assets/01.webp);
          background-size: cover;
        }
        .img2 {
          background: url(../../../assets/03.webp);
          background-size: cover;
        }
        .img3 {
          background: url(../../../assets/04.webp);
          background-size: cover;
        }
        .img4 {
          background: url(../../../assets/05.webp);
          background-size: cover;
        }
        .img5 {
          background: url(../../../assets/06.webp);
          background-size: cover;
        }
        .img6 {
          background: url(../../../assets/07.webp);
          background-size: cover;
        }
        .img7 {
          background: url(../../../assets/08.webp);
          background-size: cover;
        }
        .img8 {
          background: url(../../../assets/09.webp);
          background-size: cover;
        }
        .img9 {
          background: url(../../../assets/10.webp);
          background-size: cover;
        }
      }
    }
  }
}
</style>